<template>
    <div class="productSchedule-map">
        <a-modal width="90%" :visible="visible" title="生产进度详情" @cancel="closeModal" class="yuan-modal productSchedule-map-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">{{info.prodName}}</div>
                        <div class="form-panel-box">
                            <!-- <a-form-model-item label="生产任务编号">
                                <span class="yuan-form-show" style="width:100px">20241028003</span>
                            </a-form-model-item> -->
                           <a-form-model-item label="创建时间">
                                <span class="yuan-form-show" style="width:150px">{{info.createTime}}</span>
                            </a-form-model-item>
                            <a-form-model-item label="预计完成时间">
                                <span class="yuan-form-show" style="width:150px">{{info.finishTime}}</span>
                            </a-form-model-item>
                        </div>

                    </div>
                    <div class="form-panel">
                        <div class="form-panel-title">
                            <span>生产进度</span>
                            <a-button type="primary" icon="unordered-list" style="float:right"
                                @click="closeModal">按图标展示</a-button>
                        </div>
                        <div id="gantt_here"> </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button @click="closeModal" type="primary">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
@Component({
    name: "Add",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: {} }) info!: any;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.$nextTick(() => {
                this.getDetail();
            });
        }
    }
    formLoading = false;
    formData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.resetForm();
        gantt.clearAll();
        gantt.plugins({ tooltip: true });

        //初始化甘特图
        gantt.config.grid_width = 350;
        gantt.config.add_column = false; //添加符号

        //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
        gantt.config.autofit = false;
        gantt.config.row_height = 60;
        gantt.config.bar_height = 34;
        // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
        gantt.config.auto_types = true; //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
        gantt.config.xml_date = "%Y-%m-%d"; //甘特图时间格式
        gantt.config.readonly = true; //是否只读
        gantt.i18n.setLocale("cn"); //设置语言

        gantt.config.scales = [
            // 设置表头右侧刻度
            // 显示月日用这个
            // { unit: 'month', step: 1, format: '%Y-%m' },
            { unit: "day", step: 1, format: "%y-%m-%d" },
            // 显示年月用这个
            // { unit: "year", step: 1, format: "%Y" },
            // { unit: "month", step: 1, format: "%M" },
        ];

        // 右侧文字
        // gantt.templates.rightside_text = function (start, end, task) {
        //         return task.text+'123';
        // };

        gantt.templates.task_text = function (start, end, task) {
            return task.text;
        };

        gantt.config.tooltip_offset_x = 10; // 设置tooltips水平偏移量
        gantt.config.tooltip_offset_y = 30; // 设置tooltips垂直偏移量
        gantt.templates.tooltip_text = function (start, end, task: any) {
            return (
                `${task.text}` +
                "<br/><span>开始:</span> " +
                gantt.templates.tooltip_date_format(start) +
                "<br/><span>结束:</span> " +
                gantt.templates.tooltip_date_format(end) +
                "<br/><span>进度:</span> " +
                Math.round(task.progress * 100) +
                "%"
            );
        };
    }
    closeModal() {
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }

    async getDetail() {
        this.formLoading = true;
        try {
            gantt.init("gantt_here");
            const finishTime = this.info.finishTime || new Date();
            const parentS = new Date(this.info.createTime);
            const parentE = new Date(finishTime);
            const parentDiff = Math.abs(parentE.getTime() - parentS.getTime());

            const parentDuration = Math.ceil(parentDiff / (24 * 60 * 60 * 1000));
            console.info(parentDuration+'----')
            const data: any[] = [
                {
                    id: 1,
                    text: this.info.planName,
                    start_date: this.info.createTime,
                    duration: parentDuration,
                    progress: 0.6,
                    open: true,
                },
            ];
            this.info.planProgressObj.forEach((item, idx) => {
                const finishTime = item.endDate || new Date();
                const d1 = new Date(item.startDate || this.info.createTime);
                const d2 = new Date(finishTime);
                const timeDiff = Math.abs(d2.getTime() - d1.getTime());

                const duration = Math.ceil(timeDiff / (24 * 60 * 60 * 1000));
                console.info(duration+'+++++++++')
                data.push({
                    id: idx + 2,
                    text: item.progress,
                    start_date: item.startDate || this.info.createTime,
                    duration: duration,
                    parent: "1",
                    progress: 0.5,
                    open: true,
                });
            });
            gantt.parse({
                data,
                links: [],
            });
        } finally {
            this.formLoading = false;
        }
    }
    detailMapVisible = false;
    showDetailMap() {
        this.detailMapVisible = true;
    }

    gantData = {
        data: [
            { id: 1, text: "包装计划", start_date: "2024-02-21", duration: "11", progress: 0.6, open: true },
            { id: 3, text: "药材待检", start_date: "2024-02-21", duration: "5", parent: "1", progress: 0.5, open: true },
            { id: 4, text: "成品待放行", start_date: "2024-02-25", duration: "5", parent: "1", progress: 0.5, open: true },
            { id: 5, text: "待包合物", start_date: "2024-02-28", duration: "5", parent: "1", progress: 0.5, open: true },
        ],
        links: [],
    };
}
</script>
<style lang="scss">
.productSchedule-map-modal {
    #gantt_here {
        height: 500px;
    }
}
.gantt_tooltip {
    z-index: 2000;
}
</style>
